<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        Transition,
        KeepAlive,
        provide,
        inject,
        ref,
        defineAsyncComponent,
        getCurrentInstance,
        onMounted,
        onUpdated,
        onUnmounted,
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";

      // import {
      //   Transition,
      //   KeepAlive,
      //   defineAsyncComponent,
      //   onMounted,
      //   onUpdated,
      //   onUnmounted,
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      const props = {
        onBeforeEnter(el) {
          console.log("beforeEnter");
        },
        onEnter(el) {
          console.log("onEnter"); // 直接调done 表示瞬间移除active状态
        },
        onLeave(el) {
          console.log("onLeave"); // 离开后不屑done默认动画结束移除dom
        },
      };

      render(
        Transition(props, {
          slots: {
            default: () =>
              h("div", {
                style: { background: "red", width: "100px", height: "100px" },
              }),
          },
        }),
        app
      );

      setTimeout(() => {
        render(
          Transition(props, {
            slots: {
              default: () =>
                h("p", {
                  style: {
                    background: "green",
                    width: "100px",
                    height: "100px",
                  },
                }),
            },
          }),
          app
        );
      }, 1000);
    </script>
    <style>
      .v-enter-active,
      .v-leave-active {
        transition: opacity 0.8s linear;
      }

      .v-enter-from,
      .v-leave-to {
        opacity: 0;
      }
    </style>
  </body>
</html>
